<template>
   <div>
      <div class="echarts" ref="E"></div>
   </div>
</template>


<script lang='ts' setup>
//引入ref属性  获取dom节点
import { ref, onMounted } from "vue";
//引入echarts
import * as echarts from 'echarts';

//创建dom节点
let E: any = ref();

//挂载完成
onMounted(() => {
   Li();
});

function Li() {
   // 基于准备好的dom，初始化echarts实例
   var myChart = echarts.init(E.value);
   const data: number[][] = [];

   for (let i = 0; i <= 360; i++) {
      let t = (i / 180) * Math.PI;
      let r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
   }

   let option = {
      title: {
         text: 'Two Value-Axes in Polar'
      },
      legend: {
         data: ['line']
      },
      polar: {
         center: ['50%', '54%']
      },
      tooltip: {
         trigger: 'axis',
         axisPointer: {
            type: 'cross'
         }
      },
      angleAxis: {
         type: 'value',
         startAngle: 0
      },
      radiusAxis: {
         min: 0
      },
      series: [
         {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
         }
      ],
      animationDuration: 2000
   };
   myChart.setOption(option);
};


</script>


<style lang='less' scoped>
.echarts {
   width: 100%;
   height: 600px;
   border: 1px solid skyblue;
   margin: 20px auto;
}
</style>